"use client"

import { useState } from "react"
import { Minus, Plus, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent } from "@/components/ui/card"

export default function CartPage() {
  const [items, setItems] = useState(cartItems)
  const [selectedIds, setSelectedIds] = useState<number[]>([])

  const toggleSelect = (id: number) => {
    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]))
  }

  const toggleSelectAll = () => {
    setSelectedIds((prev) => (prev.length === items.length ? [] : items.map((item) => item.id)))
  }

  const updateQuantity = (id: number, delta: number) => {
    setItems((prev) =>
      prev.map((item) => (item.id === id ? { ...item, quantity: Math.max(1, item.quantity + delta) } : item)),
    )
  }

  const removeItem = (id: number) => {
    setItems((prev) => prev.filter((item) => item.id !== id))
    setSelectedIds((prev) => prev.filter((i) => i !== id))
  }

  const totalPrice = items
    .filter((item) => selectedIds.includes(item.id))
    .reduce((sum, item) => sum + item.price * item.quantity, 0)

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">购物车</h1>
      <div className="grid gap-8 lg:grid-cols-[1fr,400px]">
        <div className="space-y-4">
          <div className="flex items-center p-4 bg-white rounded-lg shadow">
            <Checkbox checked={selectedIds.length === items.length} onCheckedChange={toggleSelectAll} />
            <span className="ml-2">全选</span>
          </div>
          {items.map((item) => (
            <Card key={item.id}>
              <CardContent className="flex gap-4 p-4">
                <Checkbox checked={selectedIds.includes(item.id)} onCheckedChange={() => toggleSelect(item.id)} />
                <div className="w-24 h-24 bg-secondary rounded-lg overflow-hidden">
                  <img src={item.image || "/placeholder.svg"} alt={item.name} className="w-full h-full object-cover" />
                </div>
                <div className="flex-1">
                  <h3 className="font-semibold">{item.name}</h3>
                  <p className="text-sm text-muted-foreground">{item.description}</p>
                  <div className="mt-2 text-lg font-bold text-primary">¥{item.price}</div>
                </div>
                <div className="flex flex-col items-end gap-2">
                  <Button variant="destructive" size="icon" onClick={() => removeItem(item.id)}>
                    <Trash2 className="w-4 h-4" />
                  </Button>
                  <div className="flex items-center gap-2">
                    <Button variant="outline" size="icon" onClick={() => updateQuantity(item.id, -1)}>
                      <Minus className="w-4 h-4" />
                    </Button>
                    <span className="w-12 text-center">{item.quantity}</span>
                    <Button variant="outline" size="icon" onClick={() => updateQuantity(item.id, 1)}>
                      <Plus className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
        <div className="h-fit sticky top-20">
          <Card>
            <CardContent className="p-6">
              <div className="space-y-4">
                <div className="flex justify-between text-lg">
                  <span>已选商品</span>
                  <span>{selectedIds.length} 件</span>
                </div>
                <div className="flex justify-between text-lg font-bold">
                  <span>总计</span>
                  <span className="text-primary">¥{totalPrice}</span>
                </div>
                <Button className="w-full" size="lg" disabled={selectedIds.length === 0}>
                  结算
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

const cartItems = [
  {
    id: 1,
    name: "无线蓝牙耳机",
    price: 299,
    quantity: 1,
    description: "高品质音效，持久续航",
    image: "/placeholder.svg?height=200&width=200",
  },
  {
    id: 2,
    name: "智能手表",
    price: 599,
    quantity: 1,
    description: "健康监测，运动追踪",
    image: "/placeholder.svg?height=200&width=200",
  },
]

